<template>
	<div class="order">
		<el-form :model="ruleForm" label-position="top" label-width="100px">
		<div class="order-header">
			<h3>{{template.templatename}}</h3>
		</div>
		<div class="order-body">
			<div class="card info">
				<ul class="clearfix">
					<li>
						<span>客户名称</span>
						<el-input v-model="ruleForm.customerName" placeholder="请输入客户名称"></el-input>
					</li>
					<li>
						<span>方案设计</span>
						<el-input v-model="userinfo.username" readonly></el-input>
					</li>
					<li>
						<span>方案面积</span>
						<el-input v-model="ruleForm.projectSize" placeholder="请输入方案面积">
							<template slot="append">㎡</template>
						</el-input>
					</li>
					<li>
						<span>制单日期</span>
						<el-input type="text" :value="ruleForm.projectDate" readonly></el-input>
					</li>
					<li>
						<span>客户地址</span>
						<el-input v-model="ruleForm.customerAds" placeholder="请输入客户地址"></el-input>
					</li>
				</ul>
			</div>
			<div class="card" v-for="(obj,index) in data" :key="obj.id">
				<div class="card-header" @click="show(index)" ref="title">
					<i class="el-icon-arrow-right"></i>
					<span>{{obj.name}}</span>
				</div>
				<div class="card-body" ref="data">
					<table class="table">
						<thead>
							<tr>
								<th rowspan="2">#</th>
								<th rowspan="2">名称/品牌</th>
								<th rowspan="2">图片</th>
								<th rowspan="2">功能作用</th>
								<th rowspan="2">单位</th>
								<th rowspan="2">销售价格</th>
								<th colspan="10">对比方案</th>
							</tr>
							<tr>
								<th>数量</th>
								<th>方案1</th>
								<th>数量</th>
								<th>方案2</th>
								<th>数量</th>
								<th>方案3</th>
								<th>数量</th>
								<th>方案4</th>
								<th>数量</th>
								<th>方案5</th>
							</tr>
						</thead>
						<tbody>
						<template v-for="(item,b) in obj.data">
							<tr :key="b" v-if="item.display">
								<td>{{b+1}}</td>
								<td width="100">
									<span class="content">{{item.name}}</span>
								</td>
								<td width="80">
									<img :src="`http://101.37.16.149/clientmanage/public/upload/${item.pic}`" 
									alt="" class="thumb" v-img-preview>
								</td>
								<td width="170">
									<span class="content">{{item.content}}</span>
								</td>
								<td>{{item.unit}}</td>
								<td class="price">{{$init.numberFormat(item.sellprice)}}</td>

								<td class="price">
									<input type="number" class="num" v-number-only
									v-model="item.a1.num" @input="f(item,item.a1.num)">
								</td>
								<td class="price">
									{{ item.a1.num !== '' ? $init.numberFormat(item.sellprice * s2n(item.a1.num)) : 0}}
								</td>
								<!-- a1 -->
								<td class="price">
									<input type="number" class="num" v-number-only
									v-model="item.a2.num" @input="f(item,item.a2.num)">
								</td>
								<td class="price">
									{{ item.a2.num !== '' ? $init.numberFormat(item.sellprice * s2n(item.a2.num)) : 0}}
								</td>
								<!-- a2 -->
								<td class="price">
									<input type="number" class="num" v-number-only
									v-model="item.a3.num" @input="f(item,item.a3.num)">
								</td>
								<td class="price">
									{{ item.a3.num !== '' ? $init.numberFormat(item.sellprice * s2n(item.a3.num)) : 0}}
								</td>
								<!-- a3 -->
								<td class="price">
									<input type="number" class="num" 
									v-model="item.a4.num" @input="f(item,item.a4.num)">
								</td>
								<td class="price">
									{{ item.a4.num !== '' ? $init.numberFormat(item.sellprice * s2n(item.a4.num)) : 0}}
								</td>
								<!-- a4 -->
								<td class="price">
									<input type="number" class="num" 
									v-model="item.a5.num" @input="f(item,item.a5.num)">
								</td>
								<td class="price">
									{{ item.a5.num !== '' ? $init.numberFormat(item.sellprice * s2n(item.a5.num)) : 0}}
								</td>
								<!-- a5 -->
							</tr>
						</template>
						
						</tbody>
					</table>
				</div>
			</div>
			<div class="card">
				<div class="card-header selected">
					<span>价格合计</span>
				</div>
				<div class="card-body">
					<table>
						<thead>
							<tr>
								<th>方案版本号</th>
								<th>方案1</th>
								<th>方案2</th>
								<th>方案3</th>
								<th>方案4</th>
								<th>方案5</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>方案总价合计</td>
								<td>{{$init.numberFormat(temp.a1)}}</td>
								<td>{{$init.numberFormat(temp.a2)}}</td>
								<td>{{$init.numberFormat(temp.a3)}}</td>
								<td>{{$init.numberFormat(temp.a4)}}</td>
								<td>{{$init.numberFormat(temp.a5)}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="card">
				<div class="card-header">
					<span>订单备注</span>
				</div>
				<div class="card-body desc">
					<el-input
					type="textarea"
					:rows="2"
					placeholder="请输入内容"
					v-model="remarks">
					</el-input>
				</div>
			</div>
		</div>
		<div class="order-footer">
			<div class="auth">
				<el-radio-group v-model="ruleForm.radio" size="medium">
					<el-radio-button label="1">自己可见</el-radio-button>
					<el-radio-button label="2">他人可见(可读)</el-radio-button>
					<el-radio-button label="3">他人可见(编辑)</el-radio-button>
				</el-radio-group>
			</div>
			<el-button-group class="btn">
				<el-button @click="close('/')" plain>关闭窗口</el-button>
				<el-button @click="visible = true" plain>选择产品</el-button>
				<el-button @click="submitForm(ruleForm)" plain :loading="loading">保存方案</el-button>
			</el-button-group>
		</div>
		</el-form>
		<el-dialog
		title="选择显示产品"
		append-to-body
		:visible.sync="visible"
		width="900px"
		center>
		<div class="items clearfix">
			<ol v-for="(obj,index) in data" :key="index" class="clearfix">
				<li class="name">
					<span class="all">
						<el-checkbox v-model="obj.checked" @change="all(obj.checked,obj.data)">{{obj.name}}</el-checkbox>
					</span>
				</li>
				<ul class="clearfix item-list">
					<li v-for="(item,b1) in obj.data" :key="b1">
						<el-tooltip placement="top">
						<span slot="content">
							商品库存：{{item.kucun}} {{item.unit}}
						</span>
						<el-checkbox 
						:key="b1"
						@change="items(item)"
						v-model="item.display">
							{{item.name}}
						</el-checkbox>
						</el-tooltip>
					</li>
				</ul>
			</ol>	
		</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'Home',
	data(){
		return{
			demo: '',
			visible: true,
			userinfo: '',
			token: '',
			data: '',
			remarks: '',
			temp:{a1: 0,a2: 0,a3: 0,a4: 0,a5: 0},
			ruleForm: {
				name: '',
				customerName: '',
				customerAds: '',
				projectSize: '',
				radio: 2,
				projectDate: this.time(new Date()),
			},
			template: '',
			loading: false,
			value:''
		}
	},
	components: {
		
	},
	watch:{
		'data':{
			deep:true,
			handler:function(newV,oldV){

			}
      	}
	},
	directives: {
        numberOnly: {
            bind: function(el) {
                el.handler = function() {
					el.value = el.value.replace(/\D+/, '');
                }
                el.addEventListener('input', el.handler)
            },
            unbind: function(el) {
                el.removeEventListener('input', el.handler)
            }
        }
    },
	mounted(){
		let data   = this.$storage.localGet('userinfo');
		let id     = this.$route.params.id;
		
		if(data.logincode !== undefined){
			this.userinfo  = data;
			this.gettemplatedetail(data.logincode,id);
		}else{
			this.$router.push('/login');
		}
	},
	methods:{
		items(id){
			console.log(id);
			this.$forceUpdate();
		},
		all(val,item){
			if(val){
				for(let i = 0; i < item.length;i++){
					item[i].display = true
				}
				console.log(item);
			}else{
				for(let i = 0; i < item.length;i++){
					item[i].display = false
				}
			}
		},
        logout(){
            let vm = this,
            arr  = {
				password: '',
				username: '',
				checked : ''
			};
            vm.$router.push('/login');
            vm.$storage.localSet('userinfo',arr);
        },
		close(url){
			this.$router.push(url);
		},
		// 关闭窗口
		f(val,input){
			if(input < 0){
				console.log('error');
				this.$message.error('数量不能为负数');
				return
			}else{
				this.total(this.data);
				this.$forceUpdate();
			}
		},
		// 计算方案
		total(val){
			let temp = {a1: 0,a2: 0,a3: 0,a4: 0,a5: 0};
			for(let i = 0; i < val.length; i++){
				for(let b = 0;b < val[i].data.length; b++){
					temp.a1 += val[i].data[b].a1.num !== '' ?this.s2n(val[i].data[b].a1.num) * this.s2n(val[i].data[b].sellprice) : 0;
					temp.a2 += val[i].data[b].a2.num !== '' ?this.s2n(val[i].data[b].a2.num) * this.s2n(val[i].data[b].sellprice) : 0;;
					temp.a3 += val[i].data[b].a3.num !== '' ?this.s2n(val[i].data[b].a3.num) * this.s2n(val[i].data[b].sellprice) : 0;;
					temp.a4 += val[i].data[b].a4.num !== '' ?this.s2n(val[i].data[b].a4.num) * this.s2n(val[i].data[b].sellprice) : 0;;
					temp.a5 += val[i].data[b].a5.num !== '' ?this.s2n(val[i].data[b].a5.num) * this.s2n(val[i].data[b].sellprice) : 0;;
					console.log(val[i].data[b].sellprice);
				}
			}
			this.temp = temp;
			console.log(this.temp);
		},
		// 方案统计
		s2n(val){
			return parseInt(val);
		},
		// 转换数字
		show(id){
			let _el1 = this.$refs.data[id];
			let _el2 = this.$refs.title[id];
			if (_el1.getAttribute('class') === 'card-body active') {
				_el1.setAttribute('class', 'card-body')
			} else {
				_el1.setAttribute('class', 'card-body active');
			}
			if (_el2.getAttribute('class') === 'card-header selected') {
				_el2.setAttribute('class', 'card-header')
			} else {
				_el2.setAttribute('class', 'card-header selected');
			}
		},
		// 折叠表单
		gettemplatedetail(val,id){
			let vm = this;
			let arr1 = [];
			let arr2 = [];
			vm.$api.init.gettemplatedetail(val,id).then(res=> {
				let data = res.data;
				this.template = data.templateObj;
				
				if(data.code == 0){
					vm.data = data;
					data = data.moduleProductList;
					for(let i = 0; i < data.length; i++){
						if(data[i].status !== 0 && data[i].kucun !== 0){
							if(data[i].type == 1){
								arr1.push({
									id : data[i].mod_id,
									name: data[i].typename,
									data: [],
									checked: false,
								})
							}
							if(data[i].type == 2){
								arr2.push(data[i])
							}
						}
					}
					setTimeout(() => {
						for(let b = 0;b < arr2.length; b++){
							arr2[b].display = false;
							arr2[b].a1 = {num: 0,price: 0};
							arr2[b].a2 = {num: 0,price: 0};
							arr2[b].a3 = {num: 0,price: 0};
							arr2[b].a4 = {num: 0,price: 0};
							arr2[b].a5 = {num: 0,price: 0};
							for(let c = 0; c < arr1.length; c++){
								if(arr2[b].mod_id == arr1[c].id && arr2[b].type == 2){
									arr1[c].data.push(arr2[b]);
								}
							}
						}
					}, 1000);
					vm.data = arr1;

					console.log(arr1);
				} 
				else if(data.code == 1111){
					vm.logout();
				}else{
					vm.$alert(data.msg, '错误', {
						type: 'error',
						confirmButtonText: '确定',
						callback: action => {
							vm.$router.push('/')
						}
					});
				}
			})
		},
		// 获取模板
		saverequest(data){
			let vm = this;
			vm.loading = true;
			vm.$api.init.saverequest(vm.userinfo.logincode,data).then(res=> {
				let data = res.data;
				this.demo = data;
				if(data.code == 0){
					vm.$notify({
						message: '恭喜您订单添加成功',
						type: 'success'
					});
					setTimeout(() => {
						this.close('/');
						vm.loading = false;	
						vm.$store.commit('tabTips', 3);
					}, 1000);
				}else{
					return vm.$message({
						message: '客户名称不能为空',
						type: 'error'
					});
				}
			})
		},
		// 保存数据
		submitForm(form) {
			console.log(form);
			if(form.customerName == ''){
				return this.$message({
					message: '客户名称不能为空',
					type: 'error'
				});
			}
			else if(form.projectSize == ''){
				return this.$message({
					message: '项目面积不能为空',
					type: 'error'
				});
			}
			else{
				let product = [];
				let p = {};
				for(let i = 0; i<this.data.length;i++){
					for(let b = 0; b < this.data[i].data.length; b++){
						p = {
							order_id: '',
							product_id: this.data[i].data[b].product_id,
							plan_num_1: this.data[i].data[b].a1.num,
							plan_num_2: this.data[i].data[b].a2.num,
							plan_num_3: this.data[i].data[b].a3.num,
							plan_num_4: this.data[i].data[b].a4.num,
							plan_num_5: this.data[i].data[b].a5.num,
							plan_price_1: this.data[i].data[b].a1.num * this.data[i].data[b].sellprice,
							plan_price_2: this.data[i].data[b].a2.num * this.data[i].data[b].sellprice,
							plan_price_3: this.data[i].data[b].a3.num * this.data[i].data[b].sellprice,
							plan_price_4: this.data[i].data[b].a4.num * this.data[i].data[b].sellprice,
							plan_price_5: this.data[i].data[b].a5.num * this.data[i].data[b].sellprice
						}
						product.push(p);
					}
				}
				let arr = {
					order_id: '',  // 方案ID
					beizhu: this.remarks,
					template_id: this.template.id, // 方案模板ID
					ordername: this.template.templatename, // 方案名称
					kehudizhi: form.customerAds, // 客户地址
					kehuchenghu: form.customerName, // 客户称呼
					xitongmianji: form.projectSize,
					fanganriqi: form.projectDate,
					shejishi: this.userinfo.username,
					fangantotal1: this.temp.a1,
					fangantotal2: this.temp.a2,
					fangantotal3: this.temp.a3,
					fangantotal4: this.temp.a3,
					fangantotal5: this.temp.a5,
					righttype: form.radio,
					productList : product
				}
				this.demo = arr;
				this.saverequest(arr);
			}
		},
		// 提交表单
		time(date) {
			let dates = new Date(date);
			var y = dates.getFullYear();
			var m = dates.getMonth() + 1;
			m = m < 10 ? ('0' + m) : m;
			var d = dates.getDate();
			d = d < 10 ? ('0' + d) : d;
			var h = dates.getHours();
			h=h < 10 ? ('0' + h) : h;
			var minute = dates.getMinutes();
			minute = minute < 10 ? ('0' + minute) : minute;
			var second=dates.getSeconds();
			second=second < 10 ? ('0' + second) : second;
			return y + '-' + m + '-' + d;
			//下面注释好像有点问题,时间中0会舍去
		}
		// 转换时间
	}
}
</script>
<style lang="less" scoped>
.order{
	.order-header{
		padding: 0 0 20px;
		text-align: center;
		h3{
			position: relative;
			i{
				font-size: 16px;
				margin-left: 5px;
				position: absolute;
				top: 15px;
			}
			/deep/.el-input__inner{
				border: 0;
				border-radius: 0;
				text-align: center;
				font-size: 25px;
				padding: 15px 0;
				height: 80px;
				background-color: rgba(0, 0, 0, 0);
				border-bottom: 1px solid #ddd;
			}
		}
		p{
			color: #888;
			margin-top: 10px;
		}
	}
	.btn{
		width: 500px;
		display: block;
		text-align: center;
		margin: 30px auto;
		display: flex;
		.el-dropdown,
		.el-button{
			flex: 1;
			width: 100%;
			margin: 0 2px;
			border-radius: 5px;
			border-color: #409EFF;
    		color: #409EFF;
		}
	}
	.info{
		border-radius: 0 0 8px 8px!important;
		ul{
			padding: 15px 0 15px;
			list-style: none;
			li{
				width: 50%;
				float: left;
				line-height: 40px;
				font-size: 14px;
				margin: -1px 0 0 -1px;
				border: 1px solid #333;
				display: flex;
				span{
					width: 100px;
					color: #333;
					display: block;
					flex-shrink: 0;
					text-align: center;
					border-right: 1px solid #333;
					background-color: #c7d3e6;
				}
				&:last-child{
					width: calc(100% - 1px);
				}
				/deep/.el-input__inner{
					border: 0;
					border-radius: 0;
				}
				/deep/.el-input-group__append{
					border: 0;
					background-color: #fff;
				}
			}
		}
	}
	.card{
		.card-header{
			height: 45px;
			line-height: 45px;
			font-weight: 700;
			color: #FA6400;
			cursor: pointer;
			user-select: none;
			.el-icon-arrow-right{
				transition: .3s;
				transform:rotate(0deg);
			}
			&.selected{
				.el-icon-arrow-right{
					transform:rotate(90deg);
				}
			}
		}
		.card-body{
			display: block;
			&.active{
			display: none;
			}
		}
	}
	table{
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
		tr,td,th{
			padding: 8px 10px;
			font-size: 14px;
			text-align: center;
			border: 1px solid #333;
		}
		thead{
			background-color: #c7d3e6;
		}
		.thumb{
			width: 100%;
			display: block;
		}
		.price{
			font-size: 12px;
		}
		.name{
			width: 150px;
			font-weight: 500;
			background-color: #c7d3e6;
		}
	}
	input.num{
		width: 30px;
		display: block;
		text-align: center;
		padding: 5px;
		border: 1px solid #eee;
		outline: none;
		border-radius: 3px;
		background-color: rgba(0,0,0,.05);
		box-shadow: 0 0 0 2px rgba(0, 0, 0, .05);
		&:focus{
			color: #FA6400;
			border-color: #FA6400;
			background-color: #fa64001e;
			box-shadow: 0 0 0 2px rgba(250,100,0, 0.25);
		}
	}
	input[type=number] {
		&::-webkit-outer-spin-button,
		&::-webkit-inner-spin-button {
			-webkit-appearance: none;
		}
		-moz-appearance: textfield;
	}
	/deep/.el-textarea__inner{
		border-radius: 0;
		border-color: #333;
	}

	.auth{
		margin: 15px 0;
		.el-radio-group{
			display: flex;
			.el-radio-button{
				flex: 1;
				display: block;
			}
			/deep/.el-radio-button__inner{
				width: 100%;
				display: block;
				border-radius: 0;
			}
		}
	}
	/deep/.select{
		.el-select,
		.el-input__inner{
			width: 100%;
			display: block;
		}
	}
	/deep/.el-radio-button__orig-radio:checked+.el-radio-button__inner{
		background-color: #333;
		border-color: #333;
	}
	/deep/.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled){
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, .05);
	}
	/deep/.el-radio-button__orig-radio:checked+.el-radio-button__inner{
    	box-shadow: -1px 0 0 0 #333;
	}
	.add{
		width: 100%;
		margin: 0 auto;
		display: block;
		border: 0;
		appearance:none;
		-moz-appearance:none;
		-webkit-appearance:none;
		/deep/.el-input__inner{
			border: 0;
		}
	}
}

</style>
<style lang="less">
.items{
	display: block;
	overflow-y: scroll;
	ol{
		display: block;
		width: 100%;
		list-style: none;
		padding: 5px;
		li{
			font-weight: 700;
			list-style: none;
			ul{
				border: 1px solid #eee;
			}
		}
		.name{
			padding: 5px 10px;
			color: #333;
			background-color: #c7d3e6;;
			border: 1px solid #333;
			border-bottom-width: 0;
		}
		.all{
			margin: 0 5px 0 -5px;
			.el-checkbox__inner{
				border-color: #333;
			}
			.is-checked {
				.el-checkbox__inner{
					border-color: #409EFF;
				}
				.el-checkbox__label{
					color: #333;
				}
			}
		}
		.item-list{
			padding: 5px;
			width: 100%;
			border: 1px solid #333;
			overflow: hidden;
			li{
				width: 50%;
				float: left;
				line-height: 22px;
				white-space:nowrap;//不换行
				overflow: hidden;//超出隐藏
				text-overflow: ellipsis;
				/deep/.el-checkbox__label{
					font-weight: 400;
				}
				&:hover .el-checkbox__label{
					color: #409EFF;
				}
			}
		}
	}
}
</style>